<template>
  <!-- 搜索按钮 -->
  <div class="flex3-container3">
    <div class="search3-container3">
      <div class="input-group3">
        <input
          type="text"
          class="search3-input3"
          placeholder="请输入"
          v-model="keyWord"
        />
        &nbsp;&nbsp;
        <span class="input-group-btn">
          <button class="search3-button3" @click="searchPool()">搜索</button>
        </span>
      </div>
    </div>
  </div>

  <div class="card3-container3">
    <div
      class="card1"
      style="width: 14rem"
      v-for="(por, index) in ballports"
      :key="por.id"
    >
      <img :src="por.image" class="card-img-top" alt="..." />
      <!-- 直接使用 por 的 imageUrl -->
      <div class="card3-body3">
        <h5 class="card3-title3">{{ por.ballname }}</h5>
        <button class="btn btn-primary" @click="detaPool(por)">详情</button>
      </div>
    </div>
  </div>
</template>
  
<script>
import { http } from "../../utils/http.js";

export default {
  data() {
    return {
      ballports: {},
      keyWord: "",
    };
  },
  created() {
    http.request("/getBallList").then((res) => {
      this.ballports = res.data;
      console.log(res);
    });
  },
  methods: {
    detaPool(por) {
      this.$router.push({
        path: "/detapool",
        query: {
          //展示数据
          ballportsInfo: JSON.stringify(por),
        },
      });
    },
    //搜索方法
    searchPool() {
      http.get("/getBallApptballname?ballname=" + this.keyWord).then((res) => {
        console.log(this.keyword);
        this.ballports = res.data;
      });
    },
  },
};
</script>
  
<style scoped>
.flex3-container3 {
  display: flex;
  justify-content: flex-end; /* 使子元素居右 */
  align-items: center; /* 如果需要垂直居中也可以添加 */
  padding-right: 150px;
}
/* 搜索 */

.search3-container3 {  
  /* justify-content: right; /* flex布局下使内容右对齐，但在flex容器内应该使用margin-left: auto; */  
  margin-left: auto; /* 使内容居右 */  
  padding: 10px;  
} 





.input3-group3 {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.search3-input3 {
  height: 45px;
  width: 280px;
  border: 3px solid lightblue; /* 设置边框颜色为淡蓝色，宽度为3px */
  padding: 0 10px; /* 添加一些内边距以提高可读性 */
  /* 还可以添加其他样式，如字体大小、字体颜色等 */
}

.search3-button3 {
  /* 为按钮设置样式 */
  width: 80px;

  height: 45px; /* 使得按钮和输入框等高 */
  border: none; /* 移除默认边框 */
  background-color: rgb(95, 120, 71); /* 设置背景色为淡蓝色或其他你喜欢的颜色 */
  color: white; /* 设置文本颜色为白色或其他对比色 */
  cursor: pointer; /* 鼠标悬停时显示小手图标，表示可点击 */

  font-size: 18px;
  letter-spacing: 5px;
  border-radius: 50px; /* 圆角等 */
}

/* 卡片 */
.card3-container3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 在非小屏幕上，使卡片从左边开始排列 */
  max-width: 75%; /* 卡片总宽度占浏览器75% */
  margin: 0 auto; /* 居中显示 */
}

.card1 {
  width: calc(25% - 4px); /* 第一行四张卡片时每张卡片的宽度 */
  height: 18rem;
  margin-bottom: 5px; /* 卡片之间距离两个像素 */
  margin-right: 5px; /* 卡片之间距离两个像素 */
  background-color: rgb(252, 246, 246);
  border: 5px solid #e0dede; /* 卡片边框3个像素 */
  border-radius: 20px; /* 卡片四角圆角 */
  box-sizing: border-box; /* 包含边框和内边距在计算宽度和高度之内 */
}

/* 在小屏幕上，每行两张卡片 */
@media (max-width: 600px) {
  .card1 {
    width: calc(50% - 4px);
  }

  /* 第二行及以后每行的第一个卡片（也就是第二行的卡片）不需要右边距 */
  .card3-container3 .card1:nth-child(n + 3) {
    margin-top: 2px; /* 与上一行卡片保持间距 */
  }

  .card3-container3 .card1:nth-child(2n + 1) {
    margin-right: 0; /* 每行的第一个卡片不需要右边距 */
  }
}

/* 第一行放置四张卡片后，第二行放置两张卡片（这两张卡片居左） */
@media (min-width: 601px) {
  /* 假设第一行已经有四张卡片了 */
  .card-container3 .card1:nth-child(n + 5) {
    margin-top: 2px; /* 与第一行卡片保持间距 */
    width: calc(50% - 4px); /* 第二行及以后卡片宽度为50% */
  }

  .card3-container3 .card1:nth-child(5),
  .card3-container3 .card1:nth-child(6) {
    margin-right: 2px; /* 第二行卡片之间保持间距 */
  }

  .card3-container3 .card1:nth-child(6) {
    margin-right: 0; /* 第二行第二个卡片不需要右边距 */
  }
}

.card-img-top {
  width: 100%;
  height: 13rem;
  object-fit: cover;
  border: 4px solid #f5f4f2; /* 图片距卡片两个像素 */
  border-radius: 8px; /* 图片四角也是圆角 */
}

.card3-body3 {
  padding: 10px; /* 为卡片内容添加内边距 */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card3-title3 {
  letter-spacing: 1px; /* 设置卡片内字的字间距 */
  font-size: 17px;
  margin-top: -10px;
}

.btn-primary {
  /* 确保按钮是flex容器 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100px;
  height: 30px;
  font-size: 15px;
  letter-spacing: 3px;
  padding: 10px 20px; /* 示例内边距 */
  background-color: #007bff; /* 示例背景色 */
  color: white; /* 示例文字颜色 */
 border-radius: 5px;
  text-decoration: none; /* 去除下划线 */
}
/* 详情按钮取消圆角 */  
.btn.btn-primary {  
  /* 移除border-radius属性以取消圆角 */  
  border-radius: 5px;  
  
}  
  
</style>